<!-- 电子准考证页 -->

<template>
  <focus-body>
    <!-- ================================================= 实占层 -->
    <focus-box class="content">
      <!-- 个人信息 -->
      <focus-box class="message">
        <view class="messageList">
          <view class="imageUrl">
            <image
              :src="userMessage.img"
              style="width: 126rpx; height: 176rpx"
            ></image>
          </view>
          <view class="details">
            <view class="userText">{{ userMessage.name }}</view>
            <view class="userText" style="margin: 24rpx 0 24rpx 0">{{
              userMessage.idCard
            }}</view>
            <view class="userText">{{ userMessage.phone }}</view>
          </view>
          <!-- <view class="qkCode">
						<image src="{{userMessage.img}}" style="width: 106rpx; height: 106rpx;" show-menu-by-longpress="true"></image>
					</view> -->
        </view>
      </focus-box>

      <!-- 考核模块 -->
      <focus-box class="tabsTitle">
        <focus-box class="tabs">
          <u-tabs
            :list="list"
            :is-scroll="false"
            :current="current"
            @change="change"
            height="98"
            font-size="32"
            bar-height="6"
            bar-width="34"
            active-color="#4A87FD"
            inactive-color="#000000"
            class="clickTabs"
          >
          </u-tabs>
          <u-line class="u-line" color="#E5E5E5" border-style="solid"></u-line>
          <focus-box v-if="current === 0" class="theory">
            <view>
              <list>
                <view
                  class="listBlock"
                  v-for="(item, index) in dataList"
                  :key="index"
                >
                  <view class="listText">{{ item.title }}</view>
                  <view class="listDetails listText">{{ item.content }}</view>
                </view>
              </list>
            </view>
            <!-- 地图 -->
            <focus-box class="location">
              <view>
                <view class="page-body">
                  <view class="page-section page-section-gap">
                    <map
                      style="width: 700rpx; height: 470rpx"
                      :latitude="latitude"
                      :longitude="longitude"
                      @click="openMapApp()"
                    >
                    </map>
                  </view>
                </view>
              </view>
            </focus-box>
          </focus-box>
          <focus-box v-else class="theory">
            <focus-box> 暂无更多信息。 </focus-box>
          </focus-box>
        </focus-box>
      </focus-box>
    </focus-box>
    <view class="notice">
      <!-- <rich-text class="notice" :nodes="userMessage.notice"></rich-text> -->
      <view class="noticeTitle">考生须知</view>
      <view style="width: 710rpx; white-space: pre-line; padding: 0 10rpx 0 10rpx">
        {{ userMessage.notice }}
      </view>
    </view>
	<!-- 弹出框 -->
	<Popup
		:isFirst="popupShow.isFirst"
		:show="popupShow.isShow"
		:text="popupShow.text"
		@close="popupClose"
		@ok="onOpenImgUpload"
	/>
  </focus-body>
</template>

<script>
// 接口文件引入
import request from "@/pagesB/common/js/request/userInfo.js";
import Popup from "@/pagesB/components/popup/popup.vue"
export default {
  // 页面数据
  data() {
    return {
	examineeId: '',
	  popupShow:{
		  isShow:false,
		  isFirst:true,
		  text:'考生首次查看电子准考证时，必须上传本人现场的真实照片'
	  },
      list: [
        {
          name: "理论考核",
        },
      ],
      current: 0,
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: "", //纬度
      longitude: "", //经度
      //用户信息
      userMessage: {
        img: "",
        name: "",
        idCard: "",
        phone: "",
        siteAddress: "",
        notice: "",
      },
      //列表信息
      dataList: [
        {
          title: "测评时间：",
          content: "",
        },
        {
          title: "测评时长：",
          content: "",
        }, 
		{
          title: "测评岗位：",
          content: "专业知识",
        },
        {
          title: "测评科目：",
          content: "",
        },
       
        {
          title: "考场名称：",
          content: "",
        },
        {
          title: "考场地址：",
          content: "",
        },
        {
          title: "考场考室：",
          content: "",
        },
      ],
    };
  },
	components:{
		Popup
	},
  // 加载完毕
  onLoad(options) {
	const { examineeId } = options;
	this.examineeId = examineeId;
    this.admissionTicketReq()
  },
	onShow(){
		uni.$on("popupOpen",(info)=>{
			this.popupShow=info
		})
	},
  // 页面初次渲染完成
  onReady() {
    // 获取系统信息
    uni.$focus.systemInfo((sysD) => {
      this.sys = sysD;
    });
  },

  // 分享到聊天
  onShareAppMessage() {},

  // 页面事件
  methods: {
    // ======================================== 数据处理
    change(index) {
      this.current = index;
    },
	
	/**
	 * @description 关闭弹框
	 */
	popupClose(){
		this.popupShow.isShow = false
	},
	
	/**
	 * @description 上传人脸照片
	 */
	onOpenImgUpload() {
		this.popupClose();
		uni.navigateTo({
			url: `/pages/realPhoto/index?examineeId=${this.examineeId}`
		})
	},
	
    openMapApp() {
        wx.openLocation({
          latitude: Number(this.latitude),
          longitude: Number(this.longitude),
          name: this.userMessage.siteAddress,
		  fail: err => console.log("地图打开失败：", err)
        });
    },
    // ======================================== 元素事件

    // ======================================== 接口请求

    // 准考证信息
    admissionTicketReq() {
		const data = { examineeId: this.examineeId }
      request.admissionTicket({
		  data,
		  //两个回调参数一个加工过一个没有----lk
        success: (res,res2) => {
		  this.popupShow.isShow = !(!!res2.is_face);
          this.userMessage = {
            img: res.img,
            name: res.name,
            idCard: res.idCard,
            phone: res.phone,
            siteAddress: res.siteAddress,
            notice: res.notice,
          };
          this.$set(this.dataList[0], "content", res.time);
          this.$set(this.dataList[1], "content", res.kaoShiTime);
          this.$set(this.dataList[3], "content", '专业知识');
          this.$set(this.dataList[2], "content", res.sentryName);
          this.$set(this.dataList[4], "content", res.siteName);
          this.$set(this.dataList[5], "content", res.siteAddress);
          this.$set(this.dataList[6], "content", res.roomName);

          let longiAndLati = res.coordinate.split(",");
          this.longitude = longiAndLati[0];
          this.latitude = longiAndLati[1];

        },
      });
    },
  },
};
</script>

<style>
/* .content{
		display: flex;
		justify-content: center;
	} */
.message {
  width: 710rpx;
  height: 267rpx;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}
.messageList {
  width: 710rpx;
  display: flex;
}
.imageUrl {
  height: 176rpx;
  flex: 0 0 126rpx;
  margin-left: 30rpx;
  /* border-radius: 8rpx; */
}
.details {
  height: 176rpx;
  flex: 1 1 auto;
  margin-left: 30rpx;
  margin-right: 20rpx;
}
.userText {
  font-size: 30rpx;
  font-family: DIN-Medium, DIN;
  font-weight: 500;
  color: #262626;
  line-height: 40rpx;
}
.qkCode {
  height: 106rpx;
  flex: 0 0 106rpx;
  margin-top: 38rpx;
  margin-right: 36rpx;
}
.tabs {
  display: flex;
  align-items: center;
  width: 710rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.clickTabs {
  width: 710rpx;
}
.u-line {
  width: 710rpx;
  height: 2rpx;
}
.theory {
  width: 710rpx;
  display: flex;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  background-color: #fff;
}
.listBlock {
  margin-top: 34rpx;
  /* margin-left: -150rpx; */
}
.listText {
  display: inline-block;
}
.listDetails {
  max-width: 498rpx;
  margin-left: 12rpx;
  vertical-align: top;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.location {
  width: 710rpx;
  height: 470rpx;
  margin: 46rpx 0 30rpx 0;
}
.notice {
  width: 710rpx;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  align-items: center;
  background: #fff;
  border-radius: 8rpx;
  white-space: pre-wrap;
}
.noticeTitle {
  margin-top: 10rpx;
  font-size: 34rpx;
  font-weight: bold;
  color: #4a87fd;
}
</style>
